<template>
	<el-card shadow="never" style="margin-bottom: 16px">
		<template #header> 迅堪检测单元： {{ equipmentId }} </template>
		<div class="ft-detail border">
			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">设备编号</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.equipmentId }}</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">在线状态</div>
						</div>
						<div class="border right">
							<div class="cell">
								<el-badge class="status" is-dot v-if="equipmentData.online == 1" type="success">在线</el-badge>
								<el-badge class="status" is-dot v-else type="danger">离线</el-badge>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">采集状态</div>
						</div>
						<div class="border right">
							<div class="cell">
								<el-badge class="status" is-dot v-if="equipmentData.collectionStatus == 1" type="success">采集</el-badge>
								<el-badge class="status" is-dot v-else type="danger">停止</el-badge>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">安装位置</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.local }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">设备IP</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.equipmentIp }}</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">DHCP状态</div>
						</div>
						<div class="border right">
							<div class="cell">
								<el-badge class="status" is-dot v-if="equipmentData.dhcpStatus == 1" type="success">开启</el-badge>
								<el-badge class="status" is-dot v-else type="danger">关闭</el-badge>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">设备网关</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.equipmentGateway }}</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">设备子网掩码</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.equipmentMask }}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">授时服务地址</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.sntpUrl }}</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">设备型号</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.equipmentModel }}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">MQTT地址</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.mqttUrl }}</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">MQTT用户名</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.mqttUsername }}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">MQTT密码</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.mqttPassword }}</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">MQTT可靠等级</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.mqttQos }}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">采集速率</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.samplingRate }}</div>
						</div>
					</div>
				</div>
				<div class="ft-detail-row">
					<div class="right">
						<div class="border left width200 th">
							<div class="cell">上传包大小</div>
						</div>
						<div class="border right">
							<div class="cell">
								{{ equipmentData.uploadCredit }}
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">运行状态</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.runningStatus }}</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">软件版本</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.softwareVersion }}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ft-detail-row">
				<div class="left">
					<div class="ft-detail-row">
						<div class="border left width200 th">
							<div class="cell">SN码</div>
						</div>
						<div class="border right">
							<div class="cell">{{ equipmentData.sn }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</el-card>
	<el-icon>
		<RefreshLeft />
	</el-icon>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { detailData } from "./service";
import { onMounted } from "vue";
import { Equipment } from "./data";
import { ElMessage } from "element-plus";
import { ResultCodeEnum } from "@/enums/utils.request.enum";
interface Props {
	equipmentId: string;
}

/**
 * 传子
 */
const props = withDefaults(defineProps<Props>(), {
	equipmentId: "未知",
});

// 数据值
const equipmentId = computed<string | undefined>({
	get: () => props.equipmentId,

	set: (val: any) => {
		getData();
		console.log(val);
	},
});

const equipmentData = ref<Equipment>({});

onMounted(() => {
	getData();
});

//增加监听
watch(equipmentId, () => {
	getData();
});

//获取数据详情
const getData = async () => {
	const response = await detailData(equipmentId.value);
	const { data, code } = response;
	equipmentData.value = data;
	if (code == ResultCodeEnum.SUCCESS) {
		ElMessage.success("请求成功");
	} else {
		ElMessage.error(response.message);
	}
};

defineExpose({
	getData,
	equipmentData,
});
</script>
<style scoped>
.el-button--text {
	margin-right: 15px;
}

.el-select {
	width: 300px;
}

.el-input {
	width: 300px;
}

.dialog-footer button:first-child {
	margin-right: 10px;
}
</style>
